<template>
  <div id="detail">
    <title-detail @clickTheme="clickTheme" ref="nav"></title-detail>
    <scroll
      class="content"
      ref="scroll"
      @scrollPosition="scrollPosition"
      :probe-type="3"
      ><swiper-detail :topImg="topImg"></swiper-detail>
      <base-info-detail :goods="goods"></base-info-detail>
      <shop-info-detail :shops="shops"></shop-info-detail>
      <goods-info-detail :goodsInfo="goodsInfo"></goods-info-detail>
      <param-detail :paramInfo="paramInfo" ref="param"></param-detail>
      <comment-Info-detail
        :commentInfo="commentInfo"
        ref="comment"
      ></comment-Info-detail>
      <beauty :goods="recommends" ref="beauty"></beauty>
    </scroll>
    <back-top @click="backtop" v-show="isbackTop"></back-top>
    <bottom-bar @addCart="addCart"></bottom-bar>
    <!-- <toast ref="toast"></toast> -->
  </div>
</template>

<script>
import titleDetail from "./childComps/titleDetail";
import swiperDetail from "./childComps/swiperDetail";
import baseInfoDetail from "./childComps/baseInfoDetail";
import shopInfoDetail from "./childComps/shopInfoDetail";
import goodsInfoDetail from "./childComps/goodsInfoDetail";
import paramDetail from "./childComps/paramDetail";
import commentInfoDetail from "./childComps/commentInfoDetail";
import bottomBar from "./childComps/bottomBar";

import beauty from "components/content/beautyShow/beauty";
import Scroll from "components/common/scroll/Scroll";
import Toast from "components/content/toast/toast.vue";

import { debounce } from "common/utils";
import { BackTopMix } from "common/mixin";
import {
  getDetaildata,
  getRecommend,
  getBaseInfo,
  getShopInfo,
  getItemParams,
} from "network/detail";
import { inject } from "vue";

// import { mapActions } from "vuex";

export default {
  name: "Detail",
  // setup() {
  //   const showToast = inject("$showToast");
  //   return {
  //     showToast,
  //   };
  // },
  components: {
    titleDetail,
    swiperDetail,
    baseInfoDetail,
    shopInfoDetail,
    Scroll,
    goodsInfoDetail,
    paramDetail,
    commentInfoDetail,
    beauty,
    bottomBar,
    Toast,
  },
  mixins: [BackTopMix],
  data() {
    return {
      iid: null,
      topImg: [],
      goods: {},
      shops: {},
      paramInfo: {},
      goodsInfo: {},
      commentInfo: {},
      recommends: [],
      itemImgListen: null,
      refresh: null,
      topThemeYs: [],
      currentIndex: 0,
    };
  },
  created() {
    this.iid = this.$route.query.iid;

    //根据iid请求数据
    this.GetDetaildata(this.iid);
    //请求底部美女图片
    this.GetRecommend();
  },
  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 500);
    const topThemeY = debounce(() => {
      this.topThemeYs.push(0);
      this.topThemeYs.push(this.$refs.param.$el.offsetTop);
      this.topThemeYs.push(this.$refs.comment.$el.offsetTop);
      this.topThemeYs.push(this.$refs.beauty.$el.offsetTop);
      //空间换时间，减少了判断，提高了性能
      this.topThemeYs.push(Number.MAX_VALUE);
    }, 500);
    this.itemImgListen = () => {
      refresh();
    };
    this.$bus.on("loadOk", this.itemImgListen);
    this.$bus.on("goodsInfoImgLoad", () => {
      refresh();
      topThemeY();
    });
  },
  unmounted() {
    //避免与首页的$bus冲突
    this.$bus.off("loadOk", this.itemImgListen);
  },
  methods: {
    //映射action中的方法
    // ...mapActions({
    //   addCart: "addCart",
    // }),
    scrollPosition(e) {
      this.isbackTop = -e.y > 1000;
      //页面的位置与顶部栏对应的位置判断
      const positionY = -e.y;
      const length = this.topThemeYs.length;
      for (let i = 0; i < length - 1; i++) {
        // if (
        //   (this.currentIndex != i &&
        //     i < length - 1 &&
        //     positionY > this.topThemeYs[i] &&
        //     positionY < this.topThemeYs[i + 1]) ||
        //   (i === length - 1 && positionY > this.topThemeYs[i])
        // ) {
        //   this.currentIndex = i;
        //   this.$refs.nav.currentIndex = this.currentIndex;
        // }
        if (
          this.currentIndex != i &&
          positionY >= this.topThemeYs[i] &&
          positionY < this.topThemeYs[i + 1]
        ) {
          this.currentIndex = i;
          this.$refs.nav.currentIndex = this.currentIndex;
        }
      }
    },
    clickTheme(index) {
      this.$refs.scroll.scrollTo(0, -this.topThemeYs[index], 100);
    },
    GetDetaildata(iid) {
      getDetaildata(iid).then((res) => {
        const data = res.result;
        this.topImg = data.itemInfo.topImages;
        this.goods = new getBaseInfo(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        this.shops = new getShopInfo(data.shopInfo);
        this.goodsInfo = data.detailInfo;
        this.paramInfo = new getItemParams(
          data.itemParams.info,
          data.itemParams.rule
        );
        this.commentInfo = data.rate.list[0];
      });
    },
    GetRecommend() {
      getRecommend().then((res) => {
        this.recommends = res.data.list;
      });
    },
    addCart() {
      const shopMsg = {};
      shopMsg.topImg = this.topImg[0];
      shopMsg.title = this.goods.title;
      shopMsg.price = this.goods.realPrice;
      shopMsg.desc = this.goodsInfo.desc;
      shopMsg.iid = this.iid;
      // this.$store.commit("addCart", shopMsg);
      this.$store.dispatch("addCart", shopMsg).then((res) => {
        this.$Toast("加入购物车成功", 2000);
      });
      //调用太深容易造成栈溢出
      // this.addCart(shopMsg).then((res) => {
      // });
    },
  },
};
</script>

<style scoped>
#detail {
  height: 100vh;
  background-color: #fff;
  z-index: 9;
  position: relative;
}
.content {
  position: absolute;
  top: 44px;
  left: 0px;
  right: 0px;
  bottom: 58px;
}
</style>